<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>聚合图标</title>
		<style type="text/css">
			html {
				height: 100%
			}

			body {
				height: 100%;
				margin: 0px;
				padding: 0px
			}

			#container {
				height: 100%
			}
		</style>
	</head>
	<body>
		<div id='container'></div>
	</body>
	<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件 -->
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

	<!-- uni 的 SDK -->
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

	<!-- 百度地图 -->
	<!-- BMap 2.0 -->
	<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=Af6FfpOOZrHT1Ff2enuUKMZgjz4NfQ3W">
	</script>
	<!-- 在页面的头部应用点聚合工具开源库的文件 -->

	<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

	<!-- JavaScript API v2.0类参考 -->
	<!-- https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_reference.html#a2b0 -->
	
	<!-- 示例文档 -->
	<!-- https://lbsyun.baidu.com/index.php?title=jspopular/guide/widget -->

	<script type="text/javascript">
		document.addEventListener('UniAppJSBridgeReady', function() {
			// 配置百度地图
			var map = new BMap.Map("container"); // 创建地图实例
			map.centerAndZoom(new BMap.Point(108.866618, 34.306988), 16); // 初始化地图，设置中心点坐标和地图级别
			map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
			map.enableDoubleClickZoom(); // 双击放大
			map.addControl(new BMap.NavigationControl()); // 添加缩放控件
			var clusterMarkers = []
			var markerA = new BMap.Point(108.865684, 34.310775);
			var markerB = new BMap.Point(108.866259, 34.310745);
			var markerC = new BMap.Point(108.867014, 34.310745);
			var markerD = new BMap.Point(108.867948, 34.310745);
			var markerE = new BMap.Point(108.868918, 34.310715);
			var myIcon = new BMap.Icon("./images/pointer.png", new BMap.Size(30, 30), {
				// 指定定位位置
				anchor: new BMap.Size(15, 30),
			});
			clusterMarkers.push(new BMap.Marker(markerA, {icon: myIcon,})) // 自定义图标
			// clusterMarkers.push(new BMap.Marker(markerA))
			clusterMarkers.push(new BMap.Marker(markerB))
			clusterMarkers.push(new BMap.Marker(markerC))
			clusterMarkers.push(new BMap.Marker(markerD))
			clusterMarkers.push(new BMap.Marker(markerE))
			var markerClusterer = new BMapLib.MarkerClusterer(map, {
				markers: clusterMarkers
			});
		});
	</script>
</html>
